<template>
  <div class="index">
    <el-container class="container">
      <el-header>
        <img class="img" src="../common/images/2019.jpg" alt="">
        <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect">
          <el-menu-item class="el-menu-item" index="1">少坤的人民币管理</el-menu-item>
          <el-menu-item class="el-menu-item" index="2">少坤的小动物管理</el-menu-item>
        </el-menu>
        <label></label>
        <el-dropdown class="dropdown">
          <el-button type="text">
            少坤在线装逼<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="stylus" scoped>
.index
  display flex
  width 100%
  height 100%
  overflow hidden
  .el-container
    width 100%
    height 100%
    .el-header
      padding 0
      width 100%
      // background-color #6831A8
      color #333
      line-height 60px
      .img
        float left
        width 200px
        height 60px
      .el-menu
        float left
        width 400px
        height 60px
        margin-left 10%
        margin-right 40%
        .el-menu-item
          padding 0 30px
      .dropdown
        float left
    .el-footer
      color #333
      text-align center
      line-height 60px
    .el-aside
      height 100%
      background-color #D3DCE6
      color #333
      text-align center
      line-height 200px
    .el-main
      background-color #E9EEF3
      color #333
      text-align center
      line-height 160px
</style>